<script setup>
import { reactive, ref, onMounted, onUnmounted, nextTick, computed, watch } from 'vue';
import axios from "axios"
import { useRoute, useRouter } from 'vue-router'

const $route = useRoute();
const $router = useRouter()

//跳转渲染模块
const scenarioName = ref("")
let temp = JSON.parse(localStorage.getItem("scenarioName"));
if (temp == undefined) {
    routerlink()
}
scenarioName.value = temp;

const routerlink = () => {
    $router.push({ name: "home" });
}
const cardRequest = axios.create({
    baseURL: 'api',
    timeout: 3000,
    withCredentials: true,
});

const deviceTotal = reactive([])
const deviceTotalTwice = reactive([])
const dataFormat = (res) => { //添加设备大类名称及大类下的小设备id、名称、大类名称、短地址
    if (deviceTotal.length == 0) {
        deviceTotal.push({ 'name': res[0].productName, 'equipment': [] })
    }
    for (let i = 0; i < res.length; i++) {
        for (let j = 0; j < deviceTotal.length; j++) {
            if (res[i].productName == deviceTotal[j].name) { break }
            else if (j == deviceTotal.length - 1) {
                deviceTotal.push({ 'name': res[i].productName, 'equipment': [] })
                break;
            }
        }
    }
    for (let i = 0; i < res.length; i++) {
        for (let j = 0; j < deviceTotal.length; j++) {
            if (res[i].productName == deviceTotal[j].name) {
                deviceTotal[j].equipment.push({ deviceId: res[i].deviceId, deviceName: res[i].name, productName: res[i].productName, sadder: res[i].sadder })
            }
        }
    }
}

const twiceDataFormat = (respon) => {//添加小设备对应的房间
    for (let i = 0; i < deviceTotal.length; i++) {
        for (let j = 0; j < deviceTotal[i].equipment.length; j++) {
            deviceTotal[i].equipment[j].room = "未知房间"
        }
    }
    for (let i = 0; i < deviceTotal.length; i++) {
        for (let j = 0; j < deviceTotal[i].equipment.length; j++)
            for (let k = 0; k < respon.length; k++) {
                for (let z = 0; z < respon[k].deviceList.length; z++) {
                    if (respon[k].deviceList[z].deviceId == deviceTotal[i].equipment[j].deviceId) {
                        deviceTotal[i].equipment[j].room = respon[k].name;
                    }
                }
            }
    }
}

const thirdthDataFormat = (res) => {//添加小设备对应的属性
    for (let j = 0; j < deviceTotal.length; j++) {
        for (let k = 0; k < deviceTotal[j].equipment.length; k++) {
            if (res[deviceTotal[j].equipment[k].sadder] != undefined) {
                deviceTotal[j].equipment[k].brightness = res[deviceTotal[j].equipment[k].sadder].brightness
                deviceTotal[j].equipment[k].humidity = res[deviceTotal[j].equipment[k].sadder].humidity
                deviceTotal[j].equipment[k].left = res[deviceTotal[j].equipment[k].sadder].left
                deviceTotal[j].equipment[k].right = res[deviceTotal[j].equipment[k].sadder].right
                deviceTotal[j].equipment[k].temperature = res[deviceTotal[j].equipment[k].sadder].temperature
                deviceTotal[j].equipment[k].lockState = res[deviceTotal[j].equipment[k].sadder].lockState
            }
        }
    }
}

const forthDataFormat = () => {//格式小设备对应的属性
    for (let j = 0; j < deviceTotal.length; j++) {
        for (let k = 0; k < deviceTotal[j].equipment.length; k++) {
            if (deviceTotal[j].equipment[k].brightness != null) {
                for (let i = 0; i < deviceTotal[j].equipment[k].brightness.length; i += 2) {
                    switch (i) {
                        case 0:
                            deviceTotal[j].equipment[k].firstLight = parseInt(deviceTotal[j].equipment[k].brightness[i]) * 16 + parseInt(deviceTotal[j].equipment[k].brightness[i + 1])
                            break;
                        case 2:
                            deviceTotal[j].equipment[k].secondLight = parseInt(deviceTotal[j].equipment[k].brightness[i]) * 16 + parseInt(deviceTotal[j].equipment[k].brightness[i + 1])
                            break;
                        case 4:
                            deviceTotal[j].equipment[k].thirdLight = parseInt(deviceTotal[j].equipment[k].brightness[i]) * 16 + parseInt(deviceTotal[j].equipment[k].brightness[i + 1])
                            break;
                        case 6:
                            deviceTotal[j].equipment[k].forthLight = parseInt(deviceTotal[j].equipment[k].brightness[i]) * 16 + parseInt(deviceTotal[j].equipment[k].brightness[i + 1])
                            break;
                        default:
                            break;
                    }
                }
                if (deviceTotal[j].equipment[k].brightness == "00000000") {
                    deviceTotal[j].equipment[k].status = 0
                } else {
                    deviceTotal[j].equipment[k].status = 1
                }
            } else if ((deviceTotal[j].equipment[k].left != null) && (deviceTotal[j].equipment[k].right != null)) {
                if ((deviceTotal[j].equipment[k].left == 100) && (deviceTotal[j].equipment[k].right == 100)) {//反向判断，窗帘100反而是关上
                    deviceTotal[j].equipment[k].status = 1
                } else {
                    deviceTotal[j].equipment[k].status = 0
                }
            } else if (deviceTotal[j].equipment[k].productName == "网关") {
                deviceTotal[j].equipment[k].status = 1
            } else if (deviceTotal[j].equipment[k].lockState != null) {
                if (deviceTotal[j].equipment[k].lockState == "00") {
                    deviceTotal[j].equipment[k].status = 0
                } else {
                    deviceTotal[j].equipment[k].status = 1
                }
            }
        }
    }
}

const fifthFormatData = () => {
    for (let i = 0; i < deviceTotal.length; i++) {
        for (let j = 0; j < deviceTotal[i].equipment.length; j++) {
            deviceTotalTwice.push(deviceTotal[i].equipment[j])
        }
    }
    for (let i = 0; i < deviceTotalTwice.length; i++) {
        deviceTotalTwice[i].choose = 0;
    }
}

const iconIsp = reactive([])
const iconSet = () => {
    for (let i = 0; i < deviceTotalTwice.length; i++) {
        iconIsp.push('')
    }
}

const iconNow = () => {
    for (let i = 0; i < deviceTotalTwice.length; i++) {
        if (deviceTotalTwice[i].productName != "智能门锁" && deviceTotalTwice[i].productName != "网关") {
            if (deviceTotalTwice[i].choose) {
                iconIsp[i] = '\ue667'
            } else {
                iconIsp[i] = '\ue669'
            }
        } else {
            iconIsp[i] = '\ue668'
        }
    }
} 

fetch("/api/getEndDeviceList ", {
    method: "GET",
})
    .then(res => res.json())
    .then(res => {
        dataFormat(res)
        cardRequest.post("/room", {
            type: "getRoomList"
        }).then((respon) => {
            twiceDataFormat(respon.data.roomList)
            fetch("/api/getProperties ", {
                method: "GET",
            })
                .then(r => r.json())
                .then(r => {
                    thirdthDataFormat(r)
                    forthDataFormat()
                    fifthFormatData()
                    iconSet()
                    iconNow()
                })
        })
    })


const scenario = reactive([])
const setscenario = reactive([])
const getScenario = () => {
    for (let i = 0; i < deviceTotal.length; i++) {
        for (let j = 0; j < deviceTotal[i].equipment.length; j++) {
            for (let k = 0; k < scenario.length; k++) {
                for (let p = 0; p < scenario[k].messageList.length; p++) {
                    if (deviceTotal[i].equipment[j].sadder == (scenario[k].messageList[p].saddr.slice(0, 2) + scenario[k].messageList[p].saddr.slice(3, 5))) {
                        scenario[k].messageList[p].deviceName = deviceTotal[i].equipment[j].deviceName
                        scenario[k].messageList[p].productName = deviceTotal[i].equipment[j].productName
                        scenario[k].messageList[p].deviceId = deviceTotal[i].equipment[j].deviceId
                    }
                }
            }
        }
    }
}
const setS = () => {
    for (let i = 0; i < scenario.length; i++){
        if (scenarioName.value == scenario[i].name) {
            setscenario.push(...scenario[i].messageList)
            setscenario[0].auto = scenario[i].auto 
            setscenario[0].scenarioName = scenario[i].name
        }
    }
}

const addDevices = []
const addDeviceToScenario = (index) => {
    if (deviceTotalTwice[index].productName != "智能门锁" && deviceTotalTwice[index].productName != "网关") {
        deviceTotalTwice[index].choose = !deviceTotalTwice[index].choose;
        if (!deviceTotalTwice[index].choose) {
            if (addDevices.indexOf(deviceTotalTwice[index].id)) {
                addDevices.splice(addDevices.indexOf(deviceTotalTwice[index].id), 1)
            }
        } else {
            if (addDevices.indexOf(deviceTotalTwice[index].id == -1)) {
                addDevices.push(deviceTotalTwice[index].id)
            }
        }
    }
}

cardRequest.post("/situation", {
    type: "getSituationList"
}).then((res) => {
    scenario.push(...res.data.situationList)
    getScenario()
    setS()
    setModel()
    
})


const thorwError = ref(0)
const errorText = ref('')
const scenarioNameIsp = () => {//重名判断
    thorwError.value = 0
    errorText.value = ''
    for (let i = 0; i < scenario.length; i++) {
        if (scenarioName.value == scenario[i].name) {
            thorwError.value = 1
            errorText.value = '场景重名请重试'
        }
    }
}

const deleteScenario = () => {
    cardRequest.post("/situation", {
        type: "deleteSituation",
        name: setscenario[0].scenarioName
    })
    routerlink()
}

const subNow = (index, val, productName, other) => {
    if (productName == "智能窗帘") {
        if (other == 'left') {
            if (deviceTotalTwice[index].left > 0) {
                deviceTotalTwice[index].left--
            }
        } else if (other == 'right') {
            if (deviceTotalTwice[index].right > 0) {
                deviceTotalTwice[index].right--
            }
        }
    } else if (productName == "灯控") {
        if (other == 'one') {
            if (deviceTotalTwice[index].firstLight > 0) {
                deviceTotalTwice[index].firstLight--
            }
        } else if (other == 'two') {
            if (deviceTotalTwice[index].secondLight > 0) {
                deviceTotalTwice[index].secondLight--
            }
        } else if (other == 'third') {
            if (deviceTotalTwice[index].thirdLight > 0) {
                deviceTotalTwice[index].thirdLight--
            }
        } else if (other == 'four') {
            if (deviceTotalTwice[index].forthLight > 0) {
                deviceTotalTwice[index].forthLight--
            }
        }
    }
}

const addNow = (index, val, productName, other) => {
    if (productName == "智能窗帘") {
        if (other == 'left') {
            if (deviceTotalTwice[index].left < 100) {
                deviceTotalTwice[index].left++
            }
        } else if (other == 'right') {
            if (deviceTotalTwice[index].right < 100) {
                deviceTotalTwice[index].right++
            }
        }
    } else if (productName == "灯控") {
        if (other == 'one') {
            if (deviceTotalTwice[index].firstLight < 100) {
                deviceTotalTwice[index].firstLight++
            }
        } else if (other == 'two') {
            if (deviceTotalTwice[index].secondLight < 100) {
                deviceTotalTwice[index].secondLight++
            }
        } else if (other == 'third') {
            if (deviceTotalTwice[index].thirdLight < 100) {
                deviceTotalTwice[index].thirdLight++
            }
        } else if (other == 'four') {
            if (deviceTotalTwice[index].forthLight < 100) {
                deviceTotalTwice[index].forthLight++
            }
        }
    }
}

const controlNow = (index, val, productName, other) => {
    if (productName == "智能窗帘") {
        if (other == 'left') {
            if (deviceTotalTwice[index].left > 100) deviceTotalTwice[index].left = 100
            else if (deviceTotalTwice[index].left < 0) deviceTotalTwice[index].left = 0
        } else if (other == 'right') {
            if (deviceTotalTwice[index].right > 100) deviceTotalTwice[index].right = 100
            else if (deviceTotalTwice[index].left < 0) deviceTotalTwice[index].right = 0
        }
    } else if (productName == "灯控") {
        if (other == 'one') {
            if (deviceTotalTwice[index].firstLight > 100) deviceTotalTwice[index].firstLight = 100
            if (deviceTotalTwice[index].firstLight < 0) deviceTotalTwice[index].firstLight = 0
        } else if (other == 'two') {
            if (deviceTotalTwice[index].secondLight > 100) deviceTotalTwice[index].secondLight = 100
            if (deviceTotalTwice[index].secondLight < 0) deviceTotalTwice[index].secondLight = 0
        } else if (other == 'third') {
            if (deviceTotalTwice[index].thirdLight > 100) deviceTotalTwice[index].thirdLight = 100
            if (deviceTotalTwice[index].thirdLight < 0) deviceTotalTwice[index].thirdLight = 0
        } else if (other == 'four') {
            if (deviceTotalTwice[index].forthLight > 100) deviceTotalTwice[index].forthLight = 100
            if (deviceTotalTwice[index].forthLight < 0) deviceTotalTwice[index].forthLight = 0
        }
    }
}

const zeroString = (val) => {
    if (val < 10) return "0" + parseInt(val);
    else return parseInt(val).toString(16)
}

let messageList = []
const changeDevice = () => {
    for (let i = 0; i < deviceTotalTwice.length; i++){
        if (deviceTotalTwice[i].choose) {
            if (deviceTotalTwice[i].productName == "智能窗帘") {
                messageList.push({ "saddr": String(deviceTotalTwice[i].sadder.slice(0, 2) + ' ' + deviceTotalTwice[i].sadder.slice(2, 4)), "dcode": "02", "rdata": "01 " + zeroString(deviceTotalTwice[i].left) })
                messageList.push({ "saddr": String(deviceTotalTwice[i].sadder.slice(0, 2) + ' ' + deviceTotalTwice[i].sadder.slice(2, 4)), "dcode": "02", "rdata": "02 " + zeroString(deviceTotalTwice[i].right) })
            } else if(deviceTotalTwice[i].productName == "灯控"){
                messageList.push({ "saddr": String(deviceTotalTwice[i].sadder.slice(0, 2) + ' ' + deviceTotalTwice[i].sadder.slice(2, 4)), "dcode": "01", "rdata": "01 00 " + zeroString(deviceTotalTwice[i].firstLight) })
                messageList.push({ "saddr": String(deviceTotalTwice[i].sadder.slice(0, 2) + ' ' + deviceTotalTwice[i].sadder.slice(2, 4)), "dcode": "01", "rdata": "02 00 " + zeroString(deviceTotalTwice[i].secondLight) })
                messageList.push({ "saddr": String(deviceTotalTwice[i].sadder.slice(0, 2) + ' ' + deviceTotalTwice[i].sadder.slice(2, 4)), "dcode": "01", "rdata": "03 00 " + zeroString(deviceTotalTwice[i].thirdLight) })
                messageList.push({ "saddr": String(deviceTotalTwice[i].sadder.slice(0, 2) + ' ' + deviceTotalTwice[i].sadder.slice(2, 4)), "dcode": "01", "rdata": "04 00 " + zeroString(deviceTotalTwice[i].forthLight) })
            }
        }
    }
    console.log(messageList);
}

const changeScenario = () => {
    if (!thorwError.value && messageList != []) {
        //改设备设置
        changeDevice()
        cardRequest.post("/situation", {
            type: "changeMessage",
            name: setscenario[0].scenarioName,
            messageList: messageList
        })
         //改名
        cardRequest.post("/situation", {
            type: "changeName",
            name: setscenario[0].scenarioName,
            newName: scenarioName.value
        })
        //改模式
        cardRequest.post("/situation", {
            type: "changeAuto",
            name: setscenario[0].scenarioName,
            auto: setM
        })
        //改定时
        if (timeSet.value != undefined) {
            cardRequest.post("/situationExecute", {
                name: setscenario[0].scenarioName,
                time: timeSet + ":00"
            })
        }
        routerlink()
    }
}

const nowSend = () => {
    cardRequest.post("/situationExecute", {
        name: setscenario[0].scenarioName,
        time: "now"
    })
}

let setM = 0
const model = reactive([])
const setModel = () => {
    for (let i = 0; i < scenario.length; i++){
        if (setscenario[0].scenarioName == scenario[i].name) {
            setM = scenario[i].auto
            switch (scenario[i].auto) {
                case 0:
                    model.push(1, 0, 0, 0)
                    break;
                case 1:
                    model.push(0, 1, 0, 0)
                    break;
                case 2:
                    model.push(0, 0, 1, 0)
                    break;
                case 3:
                    model.push(0, 0, 0, 1)
                    break;
            }
        }
    }
}

const getText = (index) => {
    switch (index) {
        case 0:
            return "无触发"
        case 1:
            return "回家触发"
        case 2:
            return "离家触发"
        case 3:
            return "离、回家触发"
    }
}


const modelChoose = (index) => {
    for (let i = 0; i < 4; i++){
        model.pop()
    }
    switch (index) {
        case 0:
            model.push(1, 0, 0, 0)
            break;
        case 1:
            model.push(0, 1, 0, 0)
            break;
        case 2:
            model.push(0, 0, 1, 0)
            break;
        case 3:
            model.push(0, 0, 0, 1)
            break;
    }
    setM = index
}


const timeSet = ref()
console.log(scenario);
</script>

<template>
    <body class="w-[100vw] h-[100vh] flex flex-col justify-center items-center select-none bg-cover bg-no-repeat bg-center" style="background-image:url(../../background.png)">
        <div class="w-full  text-[#ffbf40] px-[1rem] py-[.5rem]" @click="routerlink()"><i class="iconfont">&#xe72e;</i></div>
        <div class="w-[90%] h-[90%] bg-gradient-to-r from-[#ffe259] to-[#ffa751] opacity-80 rounded-2xl">
            <div class="flex justify-center flex-col items-center w-full h-full bg-gradient-to-r from-[#ffe259] to-[#ffa751] opacity-80 rounded-2xl">
                <name class="w-5/6 h-[2rem] mb-[1rem] flex flex-col items-center justify-center">
                    <input @blur="scenarioNameIsp()" v-model="scenarioName" class="w-full h-full outline-none px-[.8rem] py-[1.2rem] rounded-xl" type="text" placeholder="请输入新房间名称">
                    <error v-if="thorwError" class="text-[#ca0019] text-[.8rem] font-bold">{{ '*' + errorText }}</error>
                </name>
                <devices class="w-5/6 h-[15rem] bg-white opacity-60 rounded-2xl overflow-auto">
                    <device v-for="(item, index) in deviceTotalTwice" :key="index" class="flex items-center justify-center">
                        <div class="w-[96%] h-auto bg-[#ffc773] rounded-2xl my-[.5rem] flex flex-col items-center">
                            <div class="w-full flex items-center">
                                <icon @click="addDeviceToScenario(index),iconNow()" class="w-1/4 flex justify-center items-center"><i class="iconfont">{{ iconIsp[index] }}</i></icon>
                                <div class="w-3/4 flex justify-around font-bold text-[1.1rem]">
                                    <productname>{{ item.productName }}</productname>
                                    <name>{{ item.deviceName }}</name>
                                </div>
                            </div>
                            <div v-if="item.choose" class="h-1/2 w-full flex justify-center my-[.5rem]">
                                <property class="w-3/4">
                                    <window class="flex w-full flex-col justify-around h-full items-center" v-if="item.left != null || item.right != null">
                                        <left class="w-full flex flex-col">
                                            <text class="text-[1.2rem] text-[#000000] flex items-center justify-center my-[.5rem]">预设左边窗帘打开程度</text>
                                            <roll class="w-full h-[2rem] flex items-center justify-center">
                                                <div class="w-2/3 h-[2rem] bg-white rounded-full relative flex items-center justify-between">
                                                    <sub @click="subNow(index, item.sadder, item.productName, 'left')" class="w-1/4 h-full pt-[.8rem] ml-[.3rem]"><i class="iconfont">&#xe711;</i></sub>
                                                    <num class="w-1/2 h-full">
                                                        <input @blur="controlNow(index, item.sadder, item.productName, 'left')" v-model="item.left" class="w-full h-full text-center outline-none" type="text">
                                                    </num>
                                                    <add @click="addNow(index, item.sadder, item.productName, 'left')" class="w-1/4 h-full flex items-center pr-[.5rem]"><i class="iconfont">&#xe712;</i></add>
                                                </div>
                                            </roll>
                                        </left>
                                        <right class="w-full flex flex-col">
                                            <text class="text-[1.2rem] text-[#000000] flex items-center justify-center mb-[.2rem]">预设右边窗帘打开程度</text>
                                            <roll class="w-full h-[2rem] flex items-center justify-center">
                                                <div class="w-2/3 h-[2rem] bg-white rounded-full relative flex items-center justify-between">
                                                    <sub @click="subNow(index, item.sadder, item.productName, 'right')" class="w-1/4 h-full pt-[.8rem] ml-[.3rem]"><i class="iconfont">&#xe711;</i></sub>
                                                    <num class="w-1/2 h-full">
                                                        <input @blur="controlNow(index, item.sadder, item.productName, 'right')" v-model="item.right" class="w-full h-full text-center outline-none" type="text">
                                                    </num>
                                                    <add @click="addNow(index, item.sadder, item.productName, 'right')" class="w-1/4 h-full flex items-center pr-[.5rem]"><i class="iconfont">&#xe712;</i></add>
                                                </div>
                                            </roll>
                                        </right>
                                    </window>
                                    <light class="flex w-full flex-col justify-around h-full items-center overflow-auto" v-if="item.brightness != null">
                                        <brightness class="w-4/5 flex flex-col">
                                            <text class="text-[1.2rem] text-[#000000] flex items-center justify-center my-[.5rem]">预设一号灯打开程度</text>
                                            <roll class="w-full h-[2rem] flex items-center justify-center">
                                                <div class="w-2/3 h-[2rem] bg-white rounded-full relative flex items-center justify-between">
                                                    <sub @click="subNow(index, item.sadder, item.productName, 'one')" class="w-1/4 h-full pt-[.8rem] ml-[.3rem]"><i class="iconfont">&#xe711;</i></sub>
                                                    <num class="w-1/2 h-full">
                                                        <input @blur="controlNow(index, item.sadder, item.productName, 'one')" v-model="item.firstLight" class="w-full h-full text-center outline-none" type="text">
                                                    </num>
                                                    <add @click="addNow(index, item.sadder, item.productName, 'one')" class="w-1/4 h-full flex items-center pr-[.5rem]"><i class="iconfont">&#xe712;</i></add>
                                                </div>
                                            </roll>
                                        </brightness>
                                        <brightness class="w-4/5 flex flex-col">
                                            <text class="text-[1.2rem] text-[#000000] flex items-center justify-center my-[.5rem]">预设二号灯打开程度</text>
                                            <roll class="w-full h-[2rem] flex items-center justify-center">
                                                <div class="w-2/3 h-[2rem] bg-white rounded-full relative flex items-center justify-between">
                                                    <sub @click="subNow(index, item.sadder, item.productName, 'two')" class="w-1/4 h-full pt-[.8rem] ml-[.3rem]"><i class="iconfont">&#xe711;</i></sub>
                                                    <num class="w-1/2 h-full">
                                                        <input @blur="controlNow(index, item.sadder, item.productName, 'two')" v-model="item.secondLight" class="w-full h-full text-center outline-none" type="text">
                                                    </num>
                                                    <add @click="addNow(index, item.sadder, item.productName, 'two')" class="w-1/4 h-full flex items-center pr-[.5rem]"><i class="iconfont">&#xe712;</i></add>
                                                </div>
                                            </roll>
                                        </brightness>
                                        <brightness class="w-4/5 flex flex-col">
                                            <text class="text-[1.2rem] text-[#000000] flex items-center justify-center my-[.5rem]">预设三号灯打开程度</text>
                                            <roll class="w-full h-[2rem] flex items-center justify-center">
                                                <div class="w-2/3 h-[2rem] bg-white rounded-full relative flex items-center justify-between">
                                                    <sub @click="subNow(index, item.sadder, item.productName, 'three')" class="w-1/4 h-full pt-[.8rem] ml-[.3rem]"><i class="iconfont">&#xe711;</i></sub>
                                                    <num class="w-1/2 h-full">
                                                        <input @blur="controlNow(index, item.sadder, item.productName, 'three')" v-model="item.thirdLight" class="w-full h-full text-center outline-none" type="text">
                                                    </num>
                                                    <add @click="addNow(index, item.sadder, item.productName, 'three')" class="w-1/4 h-full flex items-center pr-[.5rem]"><i class="iconfont">&#xe712;</i></add>
                                                </div>
                                            </roll>
                                        </brightness>
                                        <brightness class="w-4/5 flex flex-col">
                                            <text class="text-[1.2rem] text-[#000000] flex items-center justify-center my-[.5rem]">预设四号灯打开程度</text>
                                            <roll class="w-full h-[2rem] flex items-center justify-center">
                                                <div class="w-2/3 h-[2rem] bg-white rounded-full relative flex items-center justify-between">
                                                    <sub @click="subNow(index, item.sadder, item.productName, 'four')" class="w-1/4 h-full pt-[.8rem] ml-[.3rem]"><i class="iconfont">&#xe711;</i></sub>
                                                    <num class="w-1/2 h-full">
                                                        <input @blur="controlNow(index, item.sadder, item.productName, 'four')" v-model="item.forthLight" class="w-full h-full text-center outline-none" type="text">
                                                    </num>
                                                    <add @click="addNow(index, item.sadder, item.productName, 'four')" class="w-1/4 h-full flex items-center pr-[.5rem]"><i class="iconfont">&#xe712;</i></add>
                                                </div>
                                            </roll>
                                        </brightness>
                                    </light>
                                    <lock class="flex w-full flex-col justify-around h-full items-center overflow-auto" v-if="item.lockState != null">
                                        <lockstatus class="flex items-center justify-around w-full flex-col">
                                            <div class="flex items-center justify-around w-full">
                                                <switch @click="lockChange(item.status, index)" class="w-[5.5rem] h-[2.1rem] rounded-2xl flex relative justify-end items-center transition-all duration-220 ease-in-out" :style="item.status ? 'background-color:#7bcfa6;box-shadow:inset 0 2px 4px #5c9c7d' : 'background-color:#f05654;box-shadow:inset 0 2px 4px #bd4342'">
                                                    <point class="absolute h-[1.8rem] w-[1.8rem] rounded-full bg-gradient-to-r from-[#ffe259] to-[#ffa751] top-[0.08rem] transition-all duration-220 ease-in-out" :style="item.status ? 'left:0.1rem;box-shadow: 0 2px 4px #725e82' : 'left:3.55rem;box-shadow: 0 2px 4px #725e82'"></point>
                                                </switch>
                                            </div>
                                            <div class="flex items-center justify-around w-full my-[.5rem]">
                                                <div @click="setFace()" class="w-[4rem] h-[4rem] bg-[#cc9833] rounded-3xl flex justify-center items-center hover:bg-[#997226]">
                                                    <i class="iconfont w-full h-full flex justify-center items-center text-[#935623]">&#xe627;</i>
                                                </div>
                                                <div v-if="writeNameIsp" class="flex flex-col items-center">
                                                    <input v-model="writeName" type="text" placeholder="请输入录入人脸所属用户" class="outline-none h-[1.8rem] rounded-2xl text-center mb-[.5rem]">  
                                                    <button @click="submitFace()" class="text-[#ffe575] font-bold w-[4rem] h-[1.8rem] bg-[#cc9833] rounded-full hover:bg-[#976334]">提交</button>   
                                                </div>
                                            </div>
                                        </lockstatus>
                                    </lock>
                                </property>
                            </div>
                        </div>
                    </device>
                </devices>
                <div class="w-5/6 h-[6rem] mt-[.6rem] opacity-90 bg-white rounded-xl flex flex-2 flex-shrink-0 flex-wrap"> 
                    <div v-for="(item,index) in model" :key="index" class="w-[45%] flex items-center justify-around mx-[.2rem]">
                        <i @click="modelChoose(index)" class="iconfont w-1/5 px-[.2rem]">{{ item? '\ue667':'\ue669' }}</i>
                        <text class="w-4/5 px-[.5rem]">{{ getText(index) }}</text>
                    </div>
                </div>
                <div class="w-5/6 h-[2.4rem] mt-[.6rem] opacity-90 bg-white rounded-xl flex items-center justify-center "> 
                    <div class="text-[1.5rem] text-[#e29c45] font-bold mx-[1rem]">{{ "设置定时" }}</div>
                    <input type="time" v-model="timeSet" class=" w-[5rem] h-[2rem] outline-none" />
                </div>
                <submit @click="changeScenario()" class="w-5/6 h-[2.4rem] mt-[.6rem] opacity-90 bg-white rounded-xl flex items-center justify-center hover:opacity-40"> 
                    <div class="text-[1.5rem] text-[#e29c45] font-bold">{{ "设置场景" }}</div>
                </submit>
                <send @click="nowSend()" class="w-5/6 h-[2.4rem] mt-[.6rem] opacity-90 bg-white rounded-xl flex items-center justify-center hover:opacity-40"> 
                    <div class="text-[1.5rem] text-[#e29c45] font-bold">{{ "一键触发" }}</div>
                </send>
                <delt @click="deleteScenario()" class="w-5/6 h-[2.4rem] mt-[.6rem] opacity-90 bg-white rounded-xl flex items-center justify-center hover:opacity-40"> 
                    <div class="text-[1.5rem] text-[#e29c45] font-bold">{{ "删除场景" }}</div>
                </delt>
            </div>
        </div>
    </body>
</template>

<style scoped>
@font-face {
  font-family: 'iconfont';  /* Project id 4312277 */
  src: url('//at.alicdn.com/t/c/font_4312277_itsvnuj8z0i.woff2?t=1705446811258') format('woff2'),
       url('//at.alicdn.com/t/c/font_4312277_itsvnuj8z0i.woff?t=1705446811258') format('woff'),
       url('//at.alicdn.com/t/c/font_4312277_itsvnuj8z0i.ttf?t=1705446811258') format('truetype');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:32px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
</style>